<!-- <template>
  <div class="admin-app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template> -->

<template>
  <div class="admin-app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 侧边栏start -->
          <el-scrollbar>
            <el-menu>
              <template v-for="item in routerList">
                <template v-if="!item.children">
                  <el-menu-item :index="item.path" :key="item.name">
                    <el-icon><message /></el-icon>
                    <template #title>{{ item.title }}</template>
                  </el-menu-item>
                </template>

                <template v-else>
                  <el-sub-menu :index="item.path" :key="item.name">
                    <template #title>
                      <el-icon><message /></el-icon>{{ item.title }}
                    </template>
                    <el-menu-item
                      :index="item.path + '/' + sonItem.path"
                      v-for="sonItem in item.children"
                      :key="sonItem.name"
                    >
                      {{ sonItem.title || sonItem.name }}</el-menu-item
                    >
                  </el-sub-menu>
                </template>
              </template>
            </el-menu>
          </el-scrollbar>
          <!-- 侧边栏end -->
        </el-aside>
        <el-container>
          <el-main>
            <el-scrollbar>
              <RouterView />
            </el-scrollbar>
          </el-main>
          <el-footer><p>@copy by 富豪班 ©️2025</p></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { Message } from '@element-plus/icons-vue'
import { routersList } from '@/router/index'
import { ref } from 'vue'

// 重新拷贝列表声明any类型，否则找不到children属性报错（item.children）
const routerList = ref<any>(routersList)
console.log(routerList.value,'routerList.value');

const path = ()=>{
  routerList.value.forEach((r: { path: any; } )=>{
   console.log(r.path);
    
  })
}
console.log(path(),'path');


</script>

<style lang="scss" scoped>
.admin-app,
.el-container {
  width: 100%;
  height: 100%;
}

.el-header {
  background-color: #e87c7c;
  padding: 0 10px;
}
.el-aside {
  background-color: #e96ee9;
}
.el-main {
  background-color: #7ccbe8;
  padding: 10px;
}
.el-footer {
  background-color: #c460bd;
  padding: 0 10px;
}
.el-menu-item.is-active {
  color: black;
}
</style>
